<template>
  <div>
    <el-dialog :title="operator" :visible.sync="dialogFormVisible" >
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户姓名" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="用户账号" prop="account">
          <el-input v-model="ruleForm.userAccount"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="idNum">
          <el-input v-model="ruleForm.idCard"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="telPhone">
          <el-input v-model="ruleForm.telPhone"></el-input>
        </el-form-item>
        <el-form-item label="所属业务区" prop="buseinerrArea">
          <el-input v-model="ruleForm.buseinerrArea"></el-input>
        </el-form-item>
        <slot name="newsRemind"></slot>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    operator: { type: String, default: "" }, //该dialog框的标题
    userInfo: { type: Array, default: function (){return []} }, //dialog框的详细信息
  },
  data() {
    return {
      dialogFormVisible:false,
      value: true,
      ruleForm: {
        name: '',
        account: '',
        userAccount:"",
        idNum: '',
        buseinerrArea:"",
        telPhone: '',
        newsRemotic: '',
        selectRole:""
      },
       rules: {
          name: [
            { required: true, message: '请输入用户姓名', trigger: 'blur' },
            { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
          ],
          account: [
            { required: true, message: '请输入用户账号', trigger: 'blur' },
            { min: 6, max: 12, message: '长度在6-12个字符', trigger: 'blur' }
          ],
          idNum: [
            { required: true, message: '请输入用户身份证号码', trigger: 'blur' },
            { min: 18, max: 18, message: '长度在 18 个字符', trigger: 'blur' }
          ],
          telPhone: [
            { required: true, message: '请输入用户手机号码', trigger: 'blur' },
            { min: 11, max: 11, message: '长度在 11个字符', trigger: 'blur' }
          ],
          selectRole: [
           { required: true, message: '选择角色', trigger: 'blur' },
           { min: 3, max: 20, message: '长度在 3-20个字符', trigger: 'blur' }
          ],
          newsRemotic: [
            { required: true, message: '请开通账号短信提醒', trigger: 'blur' },
          ],
        },
      
    };
  },
};
</script>

<style lang="less" scoped>
/deep/.el-dialog {
  text-align: left;
}
/deep/.el-input{
  width: 500px;
}
/deep/.el-dialog{
  width: 45%;
}
/deep/.el-dialog__footer{
  text-align: center;
}
/deep/.el-form-item__label{
  padding: 0 22px 0 0;
}
/deep/.el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
    content: '*';
    color: #F56C6C;
    margin-right: -65px;
}
/deep/.newsRemind.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
    content: '*';
    color: #F56C6C;
    margin-right: -124px;
}
</style>